<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>个人主页</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <style>
        body
        {
            /*这个没错 不知道为啥解析不了*/
            background-image:url('/img/urbg.jpg');
            background-size: 100% 100%;
            background-repeat:no-repeat;
            background-attachment: fixed;
            height: 800px;
            position: relative;
        }
        .son{
            width: 400px;
            height: 600px;
            background-color: white;
            position:absolute;
            /* 水平垂直居中 */
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .bluecolor{
            background-color: aliceblue;
        }
        @media screen and (max-width: 768px) {
            .son{
                width: 96%!important;
                height: 20%!important;
                left: 2%!important;
                margin: 30px 0px!important;
            }
            .son .layui-field-title{
                margin: 5px 0!important;
            }
            .son .layui-elem-field legend{
                margin-left: 10px;
                padding: 0 10px 0 0;
                font-size: 0.8rem;
            }
            .son .layui-form-label{
                padding: 9px 0!important;
                width: 35%!important;
                font-size: 0.6rem;
                line-height: 10px!important;
            }
            .son .layui-input{
                height: 28px!important;
                font-size: 0.7rem!important;
            }
            .son #b2,.son #b3{
                height: 20px!important;
                line-height: 20px!important;
                padding: 0 2px!important;
            }
            .son #complete{
                height: 20px!important;
                line-height: 20px!important;
                padding: 0 2px!important;
                margin-left: 35%!important;
                margin-top: 10px;
                font-size: 0.7rem;
            }
        }
    </style>
</head>
    <body>
    <div class="layui-bg-gray son">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>个人面板</legend>
        </fieldset>
        <label class="layui-form-label">用户名 :</label>
        <div style="display: flex">
            <input th:value="${user.username}" class="layui-input" readonly="readonly">
        </div>
        <label class="layui-form-label">真实姓名 :</label>
        <div style="display: flex">
        <input th:value="${user.realName}" class="layui-input" readonly="readonly" id="i2" >
            <button id="b2" type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
        </div>
        <label class="layui-form-label">密码 :</label>
        <div style="display: flex" >
        <input value="**********" class="layui-input" readonly="readonly" id="i3">
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="b3"><i class="layui-icon"></i>
            </button>
        </div>
        <button type="button" style="margin-left: 110px" class="layui-btn layui-btn-normal layui-btn-sm" id="complete">确认
        </button>
    </div>
    <script th:inline=none>
        layui.use(['table', 'dropdown','layer'], function(){
           var $=layui.$;
           $("#b2").click(function(){
               $("#i2").attr("readonly",false)
               $("#i2").addClass("bluecolor");
           })
            // $("#i2").blur(function(){
            //     $.ajax({
            //         url: '/user/updaterealname',
            //         data: {
            //             realname:$("#i2").val(),
            //         },
            //         type: 'post',
            //         success: function (res) {
            //         }, error: function () {
            //         }
            //     });
            //     $("#i2").attr("readonly",true)
            // })
            $("#b3").click(function(){
                $("#i3").val("")
                $("#i3").attr("readonly",false)
                $("#i3").addClass("bluecolor");
            })
            // $("#i3").blur(function(){
            //     var regex = /^[0-9a-zA-Z_]+$/;
            //     var password=$("#i3").val()
            //     if (password.length>=24){
            //         layer.msg('请输入小于24个字符');
            //         $("#i3").val("**********")
            //         $("#i3").attr("readonly",true)
            //         return;
            //     }
            //     if (!regex.test(password)) {
            //         layer.msg('请输入数字字母下划线');
            //         $("#i3").val("**********")
            //         $("#i3").attr("readonly",true)
            //         return;
            //     }
            //     $.ajax({
            //         url: '/user/updatepassword',
            //         data: {
            //             password:password,
            //         },
            //         type: 'post',
            //         success: function (res) {
            //             layer.msg("修改成功")
            //         }, error: function () {
            //         }
            //     });
            //     $("#i3").val("**********")
            //     $("#i3").attr("readonly",true)
            // })
            $("#complete").click(function(){
                var regex = /^[0-9a-zA-Z_]+$/;
                var password=$("#i3").val()
                var i2ReadOnly = $("#i2").prop("readonly");
                var i3ReadOnly = $("#i3").prop("readonly");
                if (!i2ReadOnly) {
                    $.ajax({
                        url: '/user/updaterealname',
                        data: {
                            realname:$("#i2").val(),
                        },
                        type: 'post',
                        success: function (res) {
                            layer.msg("修改成功")
                        }, error: function () {
                        }
                    });
                    $("#i2").attr("readonly",true)
                    $("#i2").removeClass("bluecolor");

                }
                if (!i3ReadOnly) {
                    if (password.length>=24){
                        layer.msg('请输入小于24个字符');
                        $("#i3").val("**********")
                        $("#i3").attr("readonly",true)
                        return;
                    }
                    if (!regex.test(password)&&"**********"!=password) {
                        layer.msg('请输入数字字母下划线');
                        $("#i3").val("**********")
                        $("#i3").attr("readonly",true)
                        return;
                    }
                    $.ajax({
                        url: '/user/updatepassword',
                        data: {
                            password:password,
                        },
                        type: 'post',
                        success: function (res) {
                            layer.msg("修改成功")
                        }, error: function () {
                        }
                    });
                    $("#i3").val("**********")
                    $("#i3").attr("readonly",true)
                    $("#i3").removeClass("bluecolor");
                }
                 else {
                    layer.msg("请先修改再确认")
                }
            })
        });
    </script>
    </body>
</html>